<template>
  <div class="hello">
    <div class="draw-board">
      <canvas id="draw" ref="draw"></canvas>
    </div>

  </div>
</template>

<script>
import { fabric } from "fabric"

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeCreate: function () {
    console.log(this.$refs)
  },
  created: function () {
    console.log(this.$refs)
  },
  beforeMount: function () {
    console.log(this.$refs)
  },
  mounted: function () {
    console.log(this.$refs)
    console.log(fabric)
    let cas = this.$refs.draw
    var canvas = new fabric.Canvas(cas,{
      width: 470,
      height: 640,
      backgroundColor: "white", 
      preserveObjectStacking:true,
    });
  },
  beforeUpdate: function () {
    console.log(this.$refs)
  },
  updated: function () {
    console.log(this.$refs)
  },
  beforeDestory: function () {
    console.log(this.$refs)
  },
  destoryed: function () {
    console.log(this.$refs)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}